<template>
	<view class="page">
		<view class="unicard-header" :style="getBg">
			<view @click="showAreaDiv" class="unicard-area flex center alcenter text-main">
				<view class="ft16 ftw600">合肥</view>
				<view class="unicard-jt" :class="showArea ? 'on' : ''">
					<view class="scale6 iconfont iconicon_arrowdown"></view>
				</view>
			</view>

			<view v-if="showArea" class="unio2o-unicard-area">
				<view class="pd30 bg-default ft16 text-info">
					<text class="iconfont iconicon_location1"></text>
					<text class="ml30">已开通以下城市</text>
				</view>
				<view class="plr30">
					<view class="pt30 pb30 flex space">
						<text class="ft16 text-main">北京</text>
					</view>
					<view class="line"></view>
				</view>
				<view class="plr30">
					<view class="pt30 pb30 flex space">
						<text class="ft16 text-main">北京</text>
					</view>
					<view class="line"></view>
				</view>
				<view class="plr30">
					<view class="pt30 pb30 flex space">
						<text class="ft16 text-main ftw600">北京</text>
						<text class="iconfont iconicon_selected text-theme"></text>
					</view>
					<view class="line"></view>
				</view>
				<view class="plr30">
					<view class="pt30 pb30 flex space">
						<text class="ft16 text-main">北京</text>
					</view>
				</view>
			</view>

		</view>
		<view class="unio2o-nav-body pl30  bg-w box-shadow-bottom">

			<scroll-view class="unio2o-nav" scroll-x="true">
				<view @click="scrollSelect" :data-index="0" :class="{'on':selectIndex == 0}" class="item">
					<view class="pt20">推荐</view>
					<view class="bg-main"></view>
				</view>
				<view v-for="(item,index) in cats" :key="index" :data-index="index+1" @click="scrollSelect"
					:class="{'on':selectIndex == index+1}" class="item">
					<view class="pt20">{{item.name}}</view>
					<view class="bg-main"></view>
				</view>
			</scroll-view>

		</view>

		<scroll-view class="unicard-scroll" scroll-y="true">
			<view class="pd30">

				<view class="mb30" v-for="(item,index) in cardList" :key="index">
					<unio2o-unicard-item :card="item"></unio2o-unicard-item>
				</view>
			</view>
		</scroll-view>

		<unio2o-footer :selectIndex="3"></unio2o-footer>
	</view>
</template>

<script>
	import unio2oUnicardItem from '@/components/module/unicard/item.vue';
	export default {
		components: {
			unio2oUnicardItem
		},
		computed: {
			getBg() {
				return 'background:url(https://picsum.photos/800/400?theme=kids&bg=FFE4B5&fg=FF6347&text=%E4%BA%B2%E5%AD%90%E6%B8%B8%E4%B9%90%E5%8D%A1) no-repeat;background-size:100% 100%;';
			}
		},
		data() {
			return {
				showArea: false,
				selectIndex: 0,
				cats: [ //如果子级没有banner 那么scroll默认应该是true
					{
						name: '丽人',
						id: 1
					},
					{
						name: '美食',
						id: 2
					},
					{
						name: '休闲',
						id: 3
					},
					{
						name: '亲子',
						id: 4
					},
					{
						name: '健康',
						id: 5
					},
					{
						name: '结婚',
						id: 6
					},
				],
				cardList: []
			};
		},
		onLoad() {
			this.getList()
		},
		methods: {
			getList() {
				this.cardList = [
					// 1. 亲子游乐畅玩套餐
					{
						id: "PK2025001",
						type: "套餐卡",
						title: "亲子游乐畅玩套餐",
						price: 299,
						validity: "1年",
						description: "含5家亲子乐园无限次畅玩+10次免费体验课",
						features: ["5家乐园通用", "免费亲子课程", "生日月双倍权益"],
						image: "https://picsum.photos/600/300?kids=10"
					},

					// 2. 美食联盟储值卡
					{
						id: "SK2025002",
						type: "储值卡",
						title: "美食联盟储值卡",
						price: 500,
						validity: "2年",
						description: "充值500元享600元权益，含多家餐厅折扣",
						features: ["充值赠100元", "9折消费优惠", "生日月赠菜品"],
						image: "https://picsum.photos/600/300?food=10"
					},

					// 3. 健身次卡套餐
					{
						id: "TK2025003",
						type: "次卡",
						title: "健身次卡套餐",
						price: 399,
						validity: "6个月",
						description: "20次健身+5次私教体验+运动课程",
						features: ["多店通用", "私教指导", "免费存衣柜"],
						image: "https://picsum.photos/600/300?fitness=10"
					},

					// 4. 车主服务权益卡
					{
						id: "RK2025004",
						type: "权益卡",
						title: "车主服务权益卡",
						price: 199,
						validity: "1年",
						description: "包含洗车、保养、代驾等多项车主服务",
						features: ["24小时道路救援", "免费洗车", "保养折扣"],
						image: "https://picsum.photos/600/300?car=10"
					},

					// 5. 购物折扣联盟卡
					{
						id: "DK2025005",
						type: "折扣卡",
						title: "购物折扣联盟卡",
						price: 88,
						validity: "1年",
						description: "多家商场、超市购物专享折扣",
						features: ["会员日双倍折扣", "积分加速", "生日礼券"],
						image: "https://picsum.photos/600/300?shop=10"
					}
				]
				
			},
			scrollSelect(e) {
				this.selectIndex = e.currentTarget.dataset.index;
			},
			showAreaDiv() {
				this.showArea = !this.showArea;
			}
		}
	}
</script>

<style>
	.unio2o-unicard-area {
		position: absolute;
		z-index: 170;
		width: 100%;
		height: calc(100vh - 120rpx);
		top: 120rpx;
		left: 0;
		overflow-y: scroll;
		background: #FFFFFF;
	}

	.unicard-header {
		height: 360rpx;
		width: 100%;
		position: relative;
		z-index: 168;
	}

	.unicard-area {
		width: 200rpx;
		height: 64rpx;
		background: #FFFFFF;
		border-radius: 32rpx;
		position: absolute;
		left: calc(50% - 100rpx);
		top: 30rpx;
		z-index: 169;
	}

	.unicard-jt {
		transition: all .3s;
	}

	.unicard-jt.on {
		transform: rotate(180deg);
	}

	.unicard-scroll {
		height: calc(100vh - 560rpx - env(safe-area-inset-bottom));
	}
</style>